import React from "react";

import { Button, Space, Swiper, Toast } from "antd-mobile";

// 标题
import "./life.less";

const colors = [
    "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-article.pchome.net%2Fgame%2F00%2F19%2F25%2F53%2F1csoil2zn.jpg&refer=http%3A%2F%2Fimg-article.pchome.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
    // "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.zol.com.cn%2Fpic%2Fyouxi%2Fori_46%2F469389.jpg&refer=http%3A%2F%2Fimg9.zol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
    // "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F63%2F06%2F01300000348000123541068188112.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
    // "https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/09fa513d269759eed846184ab3fb43166d22df19.jpg"
  ];
  const urlImg = [
    {
      title: "水费",
      img: "https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/09fa513d269759eed846184ab3fb43166d22df19.jpg",
    },
    {
      title: "电费",
      img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-article.pchome.net%2Fgame%2F00%2F19%2F25%2F53%2F1csoil2zn.jpg&refer=http%3A%2F%2Fimg-article.pchome.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
    },
    {
      title: "宽带",
      img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.zol.com.cn%2Fpic%2Fyouxi%2Fori_46%2F469389.jpg&refer=http%3A%2F%2Fimg9.zol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
    },
    {
      title: "更多",
      img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F63%2F06%2F01300000348000123541068188112.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
    },
  ];
  
  const shuiUrl = [
      {
          img: "https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/09fa513d269759eed846184ab3fb43166d22df19.jpg",
          title:'保洁'
      },
      {
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.zol.com.cn%2Fpic%2Fyouxi%2Fori_46%2F469389.jpg&refer=http%3A%2F%2Fimg9.zol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
          title:'搬家'
      },
      {
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.zol.com.cn%2Fpic%2Fyouxi%2Fori_46%2F469389.jpg&refer=http%3A%2F%2Fimg9.zol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
          title:'家修'
      }
  ]
  const HotUrl = [
      {
          img: "https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/09fa513d269759eed846184ab3fb43166d22df19.jpg",
          title:'日常保洁'
      },
      {
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.zol.com.cn%2Fpic%2Fyouxi%2Fori_46%2F469389.jpg&refer=http%3A%2F%2Fimg9.zol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
          title:'除螨保洁'
      },
      {
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.zol.com.cn%2Fpic%2Fyouxi%2Fori_46%2F469389.jpg&refer=http%3A%2F%2Fimg9.zol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
          title:'宜居搬家'
      },
      {
          title: "充值卡优惠",
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.zol.com.cn%2Fpic%2Fyouxi%2Fori_46%2F469389.jpg&refer=http%3A%2F%2Fimg9.zol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
        },
  ]
export default class Life extends React.Component {
    gitUrl = () => {
        return (
          <>
            {urlImg.map((item) => {
              return (
                  <li key={item.title}>
                    <div className="urlImg">
                      <img src={item.img} alt="" />
                    </div>
                    <p>{item.title}</p>
                  </li>
              );
            })}
          </>
        );
      };
      service=()=>{
          return(
              <>
              {shuiUrl.map(item=>{
                  return(
                      <li key={item.title}>
                          <img src={item.img} alt="" />
                          <div className="background">{item.title}</div>
                      </li>
                  )
              })}
              </>
          )
      }
      getHotUrl=()=>{
          return(
              <>
              {HotUrl.map(item=>{
                  return(
                    <li key={item.title}>
                        <img src={item.img} alt="" />
                        <div className="wenzhi">
                            {item.title}
                        </div>
                    </li>
                  )
              })}
              </>
          )
      }
  render() {
    return (
      <div>
        <div className="changeIndexList">
          <ul className="input">
            <li>
              <i className="iconfont icon-xiazai19"></i>
            </li>
            <li>
              <div className="formIndex1">生活服务</div>
            </li>
            <li>
              <i className="iconfont icon-xiaoxi"></i>
            </li>
          </ul>
        </div>
        <div>
        <Swiper autoplay loop> 
          {colors.map((item,index) => (
            <Swiper.Item key={index}>
              <img className="content" src={item} alt="" />
            </Swiper.Item>
          ))}
        </Swiper>
      </div>
      <div className="shenghuo">
        <p>生活缴费</p>
        <div className="jiaofen">
          <ul>
          {this.gitUrl()}
          </ul>
        </div>
        <div className="baojie">
          <ul>
            {this.service()}
          </ul>
        </div>
        <div className="recommend">
          <p>
            热门推荐 <span>为您提供最优质的的服务，享受生活每一天</span>
          </p>
          <ul>
            {this.getHotUrl()}
          </ul>
        </div>
      </div>
      </div>
    );
  }
}
